<template>
	<view class="service">
		<view class="tabs">
			<view :class="active == 1 ? 'active tab' : 'tab'" @click="changeActive(1)">
				<view>意向合作</view>
				<view class="border"></view>
			</view>
			<view :class="active == 2 ? 'active tab' : 'tab'" @click="changeActive(2)">
				<view>投诉反馈</view>
				<view class="border"></view>
			</view>
		</view>
		<view class="serviceList" v-if="active == 1">
			<view class="cont" v-for="(item,i) in serviceList" :key="i">
				<view class="info">{{item.name}} {{item.phone}} 希望在 {{item.store}} 达成合作</view>
				<view class="time">{{item.time}}</view>
			</view>
		</view>
		<view class="serviceList" v-else>
			<view class="cont" v-for="(item,i) in serviceList" :key="i">
				<view class="info">{{item.name}} {{item.phone}} 投诉 {{item.store}} {{item.reason}}</view>
				<view class="time">{{item.time}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: 1,
				serviceList:[
					{
						name:'测试用户',
						phone:'15555555555',
						store:'海龙大厦店',
						reason:'卫生情况不好',
						time:'2022-11-05-12:20:30'
					},{
						name:'测试用户',
						phone:'15555555555',
						store:'海龙大厦店',
						reason:'卫生情况不好',
						time:'2022-11-05-12:20:30'
					},{
						name:'测试用户',
						phone:'15555555555',
						store:'海龙大厦店',
						reason:'卫生情况不好',
						time:'2022-11-05-12:20:30'
					}
				]
			}
		},
		methods: {
			changeActive(num) {
				this.active = num
			}
		}
	}
</script>

<style lang="less">
	.service {
		.tabs {
			height: 88rpx;
			background: #FFFFFF;
			line-height: 88rpx;
			display: flex;

			.tab {
				width: 50%;
				text-align: center;
				font-size: 28rpx;
				color: #333333;
			}

			.active {
				color: #E60013;

				.border {
					width: 26rpx;
					height: 4rpx;
					background: #E60012;
					border-radius: 2rpx;
					margin: 0 auto;
				}
			}
		}
		.serviceList{
			margin: 32rpx;
			.cont{
				background: #FFFFFF;
				border-radius: 16px;
				margin-bottom: 32rpx;
				padding: 32rpx;
				.info{
					font-size: 24rpx;
					color: #171717;
					line-height: 32rpx;
				}
				.time{
					font-size: 24rpx;
					color: #A4A4A4;
					margin-top: 20rpx;
				}
			}
		}
	}
</style>
